<template>
	<view class="ci">
		<view class="ciHead">
			<view class="ciHeadLi ciHeadLiOne" @click="cli_subside">
				<view class="ciHeadLiBox">
					<text>补助金授权管理</text>
					<image v-if="index_shouzhi == 0" class="ciHeadLiBoxImg" src="https://www.zzzsyh.com/applets/agent/agent/24.gif" mode=""></image>
				</view>
			</view>
			<view class="ciHeadLi">
				<view class="ciHeadLiBox" @click="cli_city">
					<text>市县管理商</text>
					<image v-if="index_shouzhi == 1" class="ciHeadLiBoxImg" src="https://www.zzzsyh.com/applets/agent/agent/24.gif" mode=""></image>
				</view>
			</view>
			<view class="ciHeadLi">
				<view class="ciHeadLiBox" @click="cli_pjd_aduit">
					<text>配件店入驻审核</text>
					<image v-if="index_shouzhi == 2" class="ciHeadLiBoxImg" src="https://www.zzzsyh.com/applets/agent/agent/24.gif" mode=""></image>
				</view>
			</view>
		</view>
		<view class="ciNav">
			<view class="ciNavBox" :class="[index_nav == 0? 'ciNavBox-ok': '']" @click="cli_nav(0)">
				<view class="ciNavBoxHead" :class="[index_nav == 0? '': 'ciNavBoxHead-false']">
					{{list_phd.length}}
				</view>
				<view class="ciNavBoxBtm">
					配件店(个)
				</view>
			</view>
			<view class="ciNavBox" :class="[index_nav == 1? 'ciNavBox-ok': '']" @click="cli_nav(1)">
				<view class="ciNavBoxHead" :class="[index_nav == 1? '': 'ciNavBoxHead-false']">
					{{list_gls.length}}
				</view>
				<view class="ciNavBoxBtm">
					管理商(个)
				</view>
			</view>
			<view class="ciNavBox" :class="[index_nav == 2? 'ciNavBox-ok': '']" @click="cli_nav(2)">
				<view class="ciNavBoxHead" :class="[index_nav == 2? '': 'ciNavBoxHead-false']">
					30
				</view>
				<view class="ciNavBoxBtm">
					区域师傅(个)
				</view>
			</view>
		</view>
		<!-- 配件店列表 -->
		<view class="ciList" v-if="index_nav == 0">
			<view class="ciLiSTTitle">
				<view class="ciLiSTTitleBox">
					配件店列表
				</view>
			</view>
			<view class="ciLiSTLi" v-for="(item, index) of list_phd" :key="index">
				<view class="ciLiSTLiLeft">
					<image v-if="item.userWximage" class="ciLiSTLiLeftImg" :src=item.userWximage mode=""></image>
					<image v-else class="ciLiSTLiLeftImg" src="https://www.zzzsyh.com/applets/agent/agent/head.png" mode=""></image>
					
					<view class="ciLiSTLiLeftBq">
						<text class="ciLiSTLiLeftSx" v-if="item.isRaker ==  1">市县</text>
						<text class="ciLiSTLiLeftPt" v-else>普通</text>
					</view>
				</view>
				<view class="ciLiSTLiCen">
					<view class="ciLiSTLiCenTop">
						{{item.storeName}}
					</view>
					<view class="ciLiSTLiCenBtm">
						{{item.storeDetailAddress}}
					</view>
				</view>
				<view class="ciLiSTLiRight">
					<!-- v-if="item.isRaker ==  0" -->
					<view v-if="item.isRaker ==  0" class="ciLiSTLiRightBtn1" @click="cli_detail_up(item, index)" >
						升级市县
					</view>
					<view class="ciLiSTLiRightBtn2" @click="cli_detail_pjd(item, index)">
						查看详情
					</view>
				</view>
			</view>
		</view>
		<!-- 管理商列表 -->
		<view class="ciList" v-if="index_nav == 1">
			<view class="ciLiSTTitle">
				<view class="ciLiSTTitleBox">
					管理商列表
				</view>
			</view>
			<view class="ciLiSTLi" v-for="(item, index) of list_gls" :key="index">
				<view class="ciLiSTLiLeft">
					<image v-if="item.userWximage" class="ciLiSTLiLeftImg" :src=item.userWximage mode=""></image>
					<image v-else class="ciLiSTLiLeftImg" src="https://www.zzzsyh.com/applets/agent/agent/head.png" mode=""></image>
					
					<!-- <view class="ciLiSTLiLeftBq">
						<text class="ciLiSTLiLeftSx" v-if="item.isRaker ==  1">市县</text>
						<text class="ciLiSTLiLeftPt" v-else>普通</text>
					</view> -->
				</view>
				<view class="ciLiSTLiCen">
					<view class="ciLiSTLiCenTop">
						{{item.rakerPerson}}  {{item.createTime | changecreateTime}}入驻
					</view>
					<view class="ciLiSTLiCenBtm" v-for="(ite, ind) of item.zsyhUserRakeareaList" :key="ind">
						{{ite.rakerProvinceName}}  {{ite.rakerCityName}}  {{ite.rakerDistrictName}}
					</view>
				</view>
				<view class="ciLiSTLiRight">
					<view class="ciLiSTLiRightBtn1" @click="cli_edit_gls(item, index)">
						更换管理商
					</view>
					<view class="ciLiSTLiRightBtn2" @click="cli_detail_gls(item, index)">
						查看详情
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import allapi from '../api/index.js'
	export default {
		data() {
			return {
				agentId: uni.getStorageSync('agentId'),
				index_nav: 0,
				index_shouzhi: 1,
				list_phd: [], // 配件店列表
				list_gls: [], //管理商列表
			}
		},
		onShow() {
			this.getPartsStoreList()
			this.getUserRakerList()
		},
		mounted() {
			
			this.index_shouzhi = setInterval(this.setTime, 1500);
		},
		methods: {
			// 自动计时
			setTime () {
				let index_shouzhi = this.index_shouzhi
				index_shouzhi ++
				if (index_shouzhi >= 3) {
					index_shouzhi = 0
				}
				// this.index_shouzhi = ''
				this.index_shouzhi = index_shouzhi
			},
			// 跳转补助金授权管理
			cli_subside () {
				uni.navigateTo({
					url: '/pages/centerInviteSubside/centerInviteSubside'
				})
			},
			// 跳转配件店入驻审核
			cli_pjd_aduit () {
				uni.navigateTo({
					url: '/pages/centerInvitePJDaduit/centerInvitePJDaduit'
				})
			},
			// 跳转到邀请实现管理商
			cli_city () {
				uni.navigateTo({
					url: '/pages/centerInviteCity/centerInviteCity'
				})
			},
			// 点击头部导航
			cli_nav(val) {
				this.index_nav = val
			},
			// 升级市县
			cli_detail_up (item, index) {
				let id = item.id
				uni.navigateTo({
					url: '/pages/centerInviteUpCity/centerInviteUpCity?id=' + id
				})
			},
			// 点击查看配件店详情
			cli_detail_pjd (item, index) {
				let id = item.id
				uni.navigateTo({
					url: '/pages/centerInviteDetailsPjd/centerInviteDetailsPjd?id=' + id
				})
			},
			// 查看管理商详情
			cli_detail_gls (item) {
				let id = item.id
				uni.navigateTo({
					url: '/pages/centerInviteCityDetails/centerInviteCityDetails?id=' + id
				})
			},
			// 更换管理商
			cli_edit_gls (item, index) {
				let id = item.id
				uni.navigateTo({
					url: '/pages/centerInviteCityEdit/centerInviteCityEdit?id=' + id
				})
			},
			// 获取配件店列表
			getPartsStoreList() {
				uni.request({
					url: allapi.getPartsStoreList,
					data: {
						agentId: this.agentId
					},
					success: (res) => {
						console.log(res);
						this.list_phd = res.data.data
					}
				})
			},
			// 获取市县代理商列表
			getUserRakerList () {
				uni.request({
					url: allapi.getUserRakerList,
					data: {
						agentId: this.agentId
					},
					success: (res) => {
						console.log(res);
						this.list_gls = res.data.data
					}
				})
			}
		},
		filters: {
			changecreateTime (val) {
				if (val) {
					return val.split(' ')[0]
				}
			}
		}
	}
</script>

<style scoped>
	.ci {
		background: linear-gradient(to bottom, #FED092, #FE8F44);
	}

	.ciHead {
		height: 669rpx;
		background-image: url('https://www.zzzsyh.com/applets/agent/agent/19.png');
		background-size: 100%;
		background-repeat: no-repeat;
		padding-top: 0.1rpx;
	}

	.ciHeadLi {
		margin-top: 30rpx;
		color: #FFFFFF;
	}

	.ciHeadLiOne {
		margin-top: 180rpx;
	}

	.ciHeadLiBox {
		width: 304rpx;
		height: 89rpx;
		text-align: center;
		line-height: 89rpx;
		background-image: url('https://www.zzzsyh.com/applets/agent/agent/20.png');
		background-size: 100%;
		background-repeat: no-repeat;
		font-size: 28rpx;
		position: relative;
	}
	.ciHeadLiBoxImg {
		position: absolute;
		width: 90rpx;
		height: 90rpx;
		top: 32rpx;
		right: -45rpx;
	}
	.ciNav {
		height: 133rpx;
		margin-top: 60rpx;
		margin-bottom: 100rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.ciNavBox {
		background: url('https://www.zzzsyh.com/applets/agent/agent/21.png');
		background-size: 100%;
		background-repeat: no-repeat;
		width: 238rpx;
		height: 133rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #535353;
	}

	.ciNavBox-ok {
		background: url('https://www.zzzsyh.com/applets/agent/agent/22.png');
		background-size: 100%;
		background-repeat: no-repeat;
		color: #FDEBA8;
	}

	.ciNavBoxHead {
		margin-top: 10rpx;
		font-weight: 600;
	}

	.ciNavBoxHead-false {
		color: #FC3A35;
	}

	.ciNavBoxBtm {
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.ciList {
		margin: 0 24rpx;
		background: #FFFFFF;
		border: 4rpx solid #FEEBAA;
		border-radius: 16rpx;
		min-height: 500rpx;
	}

	.ciLiSTTitle {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: -37rpx;
	}

	.ciLiSTTitleBox {
		width: 479rpx;
		height: 74rpx;
		background: url('https://www.zzzsyh.com/applets/agent/agent/18.png');
		background-size: 100%;
		background-repeat: no-repeat;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
	}

	.ciLiSTLi {
		margin: 40rpx 20rpx;
		border-bottom: 1rpx solid #CCCCCC;
		display: flex;
		justify-content: space-between;
		padding-bottom: 24rpx;
	}

	.ciLiSTLiLeft {
		position: relative;
		width: 76rpx;
		height: 76rpx;
	}

	.ciLiSTLiLeftImg {
		width: 76rpx;
		height: 76rpx;
		border-radius: 50%;
		background: #EEEEEE;
	}
	.ciLiSTLiLeftBq {
		width: 56rpx;
		height: 22rpx;
		position: absolute;
		bottom: 0;
		left: 10rpx;
		display: flex;
	}
	.ciLiSTLiLeftPt {
		width: 56rpx;
		height: 22rpx;
		line-height: 22rpx;
		text-align: center;
		background: linear-gradient(119deg, #EFEFEF 0%, #DADADA 100%);
		border-radius: 4rpx;
		
		font-size: 16rpx;
		color: #999999;
		/* bottom: 0;
		left: 10rpx; */
	}

	.ciLiSTLiLeftSx {
		width: 56rpx;
		height: 22rpx;
		line-height: 22rpx;
		text-align: center;
		background: linear-gradient(119deg, #FFEED6 0%, #FFD8AD 100%);
		border-radius: 4rpx;
		
		font-size: 16rpx;
		color: #F48F5F;
		
	}

	.ciLiSTLiCen {
		flex: 1;
		margin-left: 20rpx;
		margin-right: 30rpx;
	}

	.ciLiSTLiCenTop {
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
	}

	.ciLiSTLiCenBtm {
		font-size: 24rpx;
		color: #666666;
		margin-top: 8rpx;
		font-weight: 400;
		line-height: 34rpx;
	}

	.ciLiSTLiRightBtn1 {
		width: 132rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		background: linear-gradient(180deg, #F8BA70 0%, #FB862F 100%);
		border-radius: 36rpx;
		color: #FFFFFF;
		font-size: 20rpx;
		margin-bottom: 20rpx;
	}

	.ciLiSTLiRightBtn2 {
		width: 132rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		background: linear-gradient(180deg, #F27E75 0%, #E22F48 100%);
		border-radius: 36rpx;
		color: #FFFFFF;
		font-size: 20rpx;
	}
</style>
